<template>
  <el-dialog
    class="ram-delivery"
    v-if="rmaDeliveryConfig.visible"
    append-to-body
    :title="rmaDeliveryConfig.title"
    :visible.sync="rmaDeliveryConfig.visible"
    @close="close"
    width="80%"
    top="5vh"
  >
    <div class="sail-header-dialog-content">
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>基础信息</h4>
      </div>
      <avue-form ref="infoForm" v-model="form" :option="basicDataOption"></avue-form>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>客退品信息</h4>
      </div>
      <avue-crud :option="productInfoOption" :data="productInfoData" @row-del="rowDel" @selection-change="selectionProductChange"> </avue-crud>
      <avue-form ref="addProductForm" style="margin-top: 20px" v-model="form" :option="addProductOption">
        <template slot="sequenceNumber">
          <el-input
            v-model="form.sequenceNumber"
            name="sequenceNumber"
            :clearable="true"
            placeholder="请扫描产品序列号"
            suffix-icon="iconfont iconicon_scan"
            @keydown.enter.native="enterSequenceNumber"
          ></el-input>
        </template>
        <template slot="outQuantity">
          <el-input v-model="form.outQuantity" name="outQuantity" :clearable="true" placeholder="请输入补发产品数" @input="changeOutQuantity"></el-input>
        </template>
      </avue-form>
      <div class="titleIcon" v-if="form.isHasSn">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>补发产品信息</h4>
      </div>
      <avue-crud v-if="form.isHasSn" style="width: 700px; margin: 0" :option="reissueOption" :data="reissueData"> </avue-crud>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>物流信息</h4>
      </div>
      <avue-form ref="logisticsInfoForm" v-model="form" :option="logisticsInfoOption"></avue-form>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>发货信息</h4>
      </div>
      <avue-form ref="deliveryInfoForm" v-model="form" :option="deliveryOption"></avue-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submit"> <i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
      <el-button size="small" @click="rmaDeliveryConfig.visible = false"><i class="el-icon-circle-close"></i><span>返 回</span></el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSequenceNumber, delivery, getDetail } from '@/api/repair/rmaRegistration';
export default {
  name: 'rmaDeliveryModal',
  components: {},
  props: {
    config: {
      require: true,
      default: () => {}
    }
  },
  watch: {
    config: {
      handler(val) {
        this.rmaDeliveryConfig.visible = val.visible;
      },
      deep: true
    }
  },
  mounted() {
    this.rmaDeliveryConfig.visible = this.config.visible;
  },
  data() {
    return {
      rmaDeliveryConfig: {
        title: 'RMA发货',
        visible: false,
        form: {
          production: ''
        }
      },
      form: {},
      tableOption: {},
      reissueData: [],
      productInfoData: [],
      basicDataOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 120,
        column: [
          {
            label: 'RMA号',
            prop: 'rmaNo',
            span: 6,
            disabled: true
          },
          {
            label: '销售出库单号',
            prop: 'deliveryOrderNo',
            type: 'search',
            disabled: true,
            span: 6,
            placeholder: '请选择 销售出库单',
            appendClick: () => {
              if (this.dialogTitle === '新增') {
                this.openDeliveryOrderCommonModal();
              }
            }
          },
          {
            label: '客户名称',
            prop: 'partnerName',
            disabled: true,
            span: 6,
            placeholder: '客户名称'
          },
          {
            label: '客户诉求',
            prop: 'clientConcern',
            span: 6,
            type: 'select',
            disabled: true,
            dicData: [
              { label: '返修', value: '返修' },
              { label: '换新', value: '换新' }
            ]
          },
          {
            label: '是否保内',
            prop: 'isUnderWarranty',
            span: 6,
            type: 'select',
            disabled: true,
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          },
          {
            label: '赔偿金',
            prop: 'compensationAmt',
            span: 6,
            disabled: true,
            type: 'number'
          },
          {
            label: '退货原因',
            prop: 'reason',
            disabled: true,
            span: 6
          },
          {
            label: '是否赔偿',
            prop: 'isCompensation',
            span: 6,
            type: 'radio',
            disabled: true,
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false }
            ],
            value: false,
            control: (val, form) => {
              if (val) {
                return {
                  compensationAmt: { display: true }
                };
              } else {
                return {
                  compensationAmt: { display: false }
                };
              }
            }
          },
          {
            label: '赔偿金',
            prop: 'compensationAmt',
            span: 6,
            type: 'number',
            disabled: true,
            rules: [
              {
                required: true,
                message: '请输入赔偿金',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '业务员',
            prop: 'salesman',
            disabled: true,
            span: 6
          }
        ]
      },
      productInfoOption: {
        height: '100',
        calcHeight: 30,
        tip: false,
        border: true,
        index: false,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        menu: false,
        cellBtn: true,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '规格型号',
            prop: 'partModel'
          },
          {
            label: '订单数量',
            prop: 'orderQuantity'
          },
          {
            label: '返厂数量',
            prop: 'rmaQuantity',
            cell: true,
            type: 'number',
            precision: 0,
            minRows: 1,
            controls: false,
            rules: [
              {
                required: true,
                message: '请输入返厂数量',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '出维修数',
            prop: 'repairedQuantity'
          },
          {
            label: '报废数',
            prop: 'scrapQuantity'
          },
          {
            label: '发货数',
            prop: 'deliveryQuantity'
          }
        ]
      },
      addProductOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '是否新品补发',
            prop: 'isNewReissue',
            type: 'radio',
            span: 6,
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false }
            ],
            value: false,
            control: (val, form) => {
              if (val) {
                return {
                  isHasSn: { display: true }
                };
              } else {
                return {
                  isHasSn: { display: false },
                  sequenceNumber: { display: false },
                  outQuantity: { display: false }
                };
              }
            }
          },
          {
            label: '补发新品是否有条码',
            prop: 'isHasSn',
            type: 'radio',
            display: false,
            span: 6,
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false }
            ],
            control: (val, form) => {
              if (val) {
                return {
                  sequenceNumber: { display: true },
                  outQuantity: { display: false }
                };
              } else if (!this.form.isNewReissue) {
                return {
                  sequenceNumber: { display: false },
                  outQuantity: { display: false }
                };
              } else if (val === false) {
                return {
                  sequenceNumber: { display: false },
                  outQuantity: { display: true }
                };
              }
            }
          },
          {
            label: '补发产品序列号',
            prop: 'sequenceNumber',
            display: false,
            span: 6,
            rules: [
              {
                required: true,
                message: '请输入补发产品序列号',
                trigger: 'blur'
              },
              {
                required: true,
                trigger: 'blur',
                validator: (rule, value, callback) => {
                  if (this.form.isHasSn && this.form.isNewReissue && this.reissueData.length === 0) {
                    callback(new Error('请扫描产品序列号！'));
                  } else {
                    callback();
                  }
                }
              }
            ]
          },
          {
            label: '补发产品数',
            prop: 'outQuantity',
            type: 'number',
            span: 6,
            controls: false,
            display: false,
            minRows: '',
            rules: [
              {
                required: true,
                message: '请输入补发产品数',
                trigger: 'blur'
              }
              // {
              //   required: true,
              //   trigger: 'blur',
              //   validator: (rule, value, callback) => {
              //     if (!this.form.isHasSn && this.form.isNewReissue && !this.form.outQuantity) {
              //       callback(new Error('请'));
              //     } else {
              //       callback();
              //     }
              //   }
              // }
            ]
          }
        ]
      },
      reissueOption: {
        height: '200',
        width: '300',
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        menu: false,
        cellBtn: true,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '规格型号',
            prop: 'partModel'
          }
        ]
      },
      logisticsInfoOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '联系人',
            prop: 'client',
            span: 8,
            disabled: true,
            placeholder: '联系人'
          },
          {
            label: '联系方式',
            prop: 'clientMobile',
            span: 8,
            disabled: true,
            placeholder: '联系方式'
          },
          {
            label: '客户地址',
            prop: 'clientAddress',
            span: 8,
            disabled: true,
            placeholder: '客户地址'
          },
          {
            label: '提货地址',
            prop: 'pickupAddress',
            span: 8,
            type: 'search',
            disabled: true,
            placeholder: '请选择 提货地址',
            appendClick: () => {
              this.openLocationCommonModal();
            }
          },
          {
            label: '运费类型',
            prop: 'freightType',
            span: 8,
            type: 'select',
            disabled: true,
            dicData: [
              { label: '到付', value: '到付' },
              { label: '运费险', value: '运费险' }
            ]
          },
          {
            label: '运费',
            prop: 'freightAmt',
            span: 8,
            type: 'number',
            disabled: true
          }
        ]
      },
      deliveryOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '发货说明',
            prop: 'outDescription',
            type: 'textarea',
            span: 24,
            maxRows: 3,
            minRows: 3
          }
        ]
      }
    };
  },
  watch: {
    'form.isHasSn'(val) {
      if (val) {
        this.form.outQuantity = '';
      } else {
        this.reissueData = [];
      }
      this.productInfoData = this._cloneDeep([this.form]);
    }
  },
  methods: {
    submit() {
      this.$refs.addProductForm.validate((valid, done) => {
        if (valid) {
          let productList = this.reissueData.map((res) => {
            return {
              sequenceNumber: res.sequenceNumber,
              id: res.id,
              partMasterId: res.partMasterId,
              partNo: res.partNo,
              partModel: res.partModel
            };
          });

          if (this.form.isHasSn) {
            this.form.outQuantity = this.reissueData.length;
          }
          if (!this.form.isNewReissue) {
            this.form.outQuantity = '';
          }

          let params = {
            rmaProductId: this.form.rmaProductId,
            partMasterId: this.form.partMasterId,
            partNo: this.form.partNo,
            outQuantity: this.form.outQuantity,
            // outLotNo: this.form.outLotNo,
            isNewReissue: this.form.isNewReissue,
            isHasSn: this.form.isHasSn,
            outDescription: this.form.outDescription,
            remark: this.form.remark,
            // productIds: '',
            // productSns: '',
            // packingIds: '',
            // packingSns: '',
            productList
          };
          delivery(params).then((res) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$emit('submit');
            this.rmaDeliveryConfig.visible = false;
          });
        }
        done();
      });
    },
    changeOutQuantity() {
      this.productInfoData = this.productInfoData.map((item) => {
        item.deliveryQuantity = Number(item.repairedQuantity) + Number(this.form.outQuantity) || 0;
        return item;
      });
    },
    enterSequenceNumber() {
      getSequenceNumber({
        sequenceNumber: this.form.sequenceNumber,
        partNoList: [this.form.partNo]
      }).then((res) => {
        let data = res.data.data;
        let flag = this.reissueData.some((item) => item.sequenceNumber === data.sequenceNumber);
        if (flag) {
          this.$message({
            type: 'warning',
            message: '产品序列号重复，请重新扫描!'
          });
          return;
        }
        this.reissueData.push(data);
        this.productInfoData = this.productInfoData.map((item) => {
          item.deliveryQuantity = Number(item.repairedQuantity) + Number(this.reissueData.length) || 0;
          return item;
        });
      });
    },
    selectionProductChange(list) {
      this.selectionDetailList = list;
    },
    async showDialog(row) {
      this.productInfoData = this._cloneDeep([row]);
      this.form = row;
      this.productInfoData.forEach((item) => {
        if (!item.deliveryQuantity) {
          item.deliveryQuantity = 0;
        }
      });
      this.rmaDeliveryConfig.visible = true;
    },
    close() {
      this.rmaDeliveryConfig.visible = false;
      this.$emit('close');
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .avue-crud__menu {
  display: none;
}

.titleIcon {
  display: flex;
  align-items: center;
}
</style>
